<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>图书信息 - 依依图书 后台管理系统</title>
    <link rel="icon" href="favicon.ico" type="image/ico">
    <meta name="keywords" content="依依图书,图书,管理,后台管理系统">
    <meta name="description" content="一个基于Bootstrap v3.3.7的后台管理系统的HTML">
    <meta name="author" content="wuyi">
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="/static/css/style.min.css" rel="stylesheet">
    <!--对话框-->
    <link rel="stylesheet" href="/static/js/jconfirm/jquery-confirm.min.css">
    <link href="/static/css/style.min.css" rel="stylesheet">
    <style type="text/css">
        table {
            table-layout: fixed;
        }
        td{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        td:hover{
            text-overflow:inherit;
            overflow: visible;
            white-space: pre-line;
        }
    </style>
</head>
<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <aside class="lyear-layout-sidebar">

            <!-- logo -->
            <div id="logo" class="sidebar-header">
                <a href="/toPage?url=/yiyibook/manager/index_manager"><img src="/static/images/logo-sidebar.png" title="LightYear" alt="LightYear" /></a>
            </div>
            <div class="lyear-layout-sidebar-scroll">

                <nav class="sidebar-main">
                    <ul class="nav nav-drawer">
                        <li class="nav-item"> <a href="/toPage?url=/yiyibook/manager/index_manager"><i class="mdi mdi-home"></i> 后台首页</a> </li>
                        <li class="nav-item"> <a href="/toPage?url=/yiyibook/manager/member"><i class="mdi mdi-account"></i> 会员管理</a> </li>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-format-list-bulleted"></i> 图书类型管理</a>
                            <ul class="nav nav-subnav">
                                <li><a href="/toPage?url=/yiyibook/manager/bookbigstyle">图书大类</a> </li>
                                <li><a href="/toPage?url=/yiyibook/manager/booksmallstyle">图书小类</a> </li>
                            </ul>
                        </li>
                        <li class="nav-item active"> <a href="/toPage?url=/yiyibook/manager/book"><i class="mdi mdi-library-books"></i> 图书管理</a> </li>
                        <li class="nav-item"> <a href="/toPage?url=/yiyibook/manager/order"><i class="mdi mdi-view-list"></i> 订单管理</a> </li>
                        <li class="nav-item"> <a href="/toPage?url=/yiyibook_templates/index"><i class="mdi mdi-clipboard-text"></i> 出库单管理</a> </li>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-palette"></i> UI 元素</a>
                            <ul class="nav nav-subnav">
                                <li class="active"> <a href="/toPage?url=/yiyibook_templates/lyear_ui_buttons">按钮</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_ui_cards">卡片</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_ui_grid">格栅</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_ui_icons">图标</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_ui_tables">表格</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_ui_modals">模态框</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_ui_tooltips_popover">提示 / 弹出框</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_ui_alerts">警告框</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_ui_pagination">分页</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_ui_progress">进度条</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_ui_tabs">标签页</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_ui_typography">排版</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_ui_step">步骤</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_ui_other">其他</a> </li>
                            </ul>
                        </li>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-format-align-justify"></i> 表单</a>
                            <ul class="nav nav-subnav">
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_forms_elements">基本元素</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_forms_radio">单选框</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_forms_checkbox">复选框</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_forms_switch">开关</a> </li>
                            </ul>
                        </li>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-file-outline"></i> 示例页面</a>
                            <ul class="nav nav-subnav">
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_pages_doc">文档列表</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_pages_gallery">图库列表</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_pages_config">网站配置</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_pages_rabc">设置权限</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_pages_add_doc">新增文档</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_pages_guide">表单向导</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_pages_login">登录页面</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_pages_error">错误页面</a> </li>
                            </ul>
                        </li>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-language-javascript"></i> JS 插件</a>
                            <ul class="nav nav-subnav">
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_js_datepicker">日期选取器</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_js_sliders">滑块</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_js_colorpicker">选色器</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_js_chartjs">Chart.js</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_js_jconfirm">对话框</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_js_tags_input">标签插件</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_js_notify">通知消息</a> </li>
                            </ul>
                        </li>
                    </ul>
                </nav>

                <div class="sidebar-footer">
                    <p class="copyright">Copyright &copy; 2019. <a target="_blank" href="http://lyear.itshubao.com">IT书包</a> All rights reserved.</p>
                </div>
            </div>

        </aside>
        <!--End 左侧导航-->

        <!--头部信息-->
        <header class="lyear-layout-header">

            <nav class="navbar navbar-default">
                <div class="topbar">

                    <div class="topbar-left">
                        <div class="lyear-aside-toggler">
                            <span class="lyear-toggler-bar"></span>
                            <span class="lyear-toggler-bar"></span>
                            <span class="lyear-toggler-bar"></span>
                        </div>
                        <span class="navbar-page-title"> 图书信息 </span>
                    </div>

                    <ul class="topbar-right">
                        <li class="dropdown dropdown-profile">
                            <a href="javascript:void(0)" data-toggle="dropdown">
                                <img class="img-avatar img-avatar-48 m-r-10" src="/static/images/users/avatar.jpg" alt="笔下光年" />
                                <span>笔下光年 <span class="caret"></span></span>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_pages_profile"><i class="mdi mdi-account"></i> 个人信息</a> </li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_pages_edit_pwd"><i class="mdi mdi-lock-outline"></i> 修改密码</a> </li>
                                <li> <a href="javascript:void(0)"><i class="mdi mdi-delete"></i> 清空缓存</a></li>
                                <li class="divider"></li>
                                <li> <a href="/toPage?url=/yiyibook_templates/lyear_pages_login"><i class="mdi mdi-logout-variant"></i> 退出登录</a> </li>
                            </ul>
                        </li>
                        <!--切换主题配色-->
                        <li class="dropdown dropdown-skin">
                            <span data-toggle="dropdown" class="icon-palette"><i class="mdi mdi-palette"></i></span>
                            <ul class="dropdown-menu dropdown-menu-right" data-stopPropagation="true">
                                <li class="drop-title"><p>主题</p></li>
                                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="site_theme" value="default" id="site_theme_1" checked>
                    <label for="site_theme_1"></label>
                  </span>
                  <span>
                    <input type="radio" name="site_theme" value="dark" id="site_theme_2">
                    <label for="site_theme_2"></label>
                  </span>
                                    <span>
                    <input type="radio" name="site_theme" value="translucent" id="site_theme_3">
                    <label for="site_theme_3"></label>
                  </span>
                                </li>
                                <li class="drop-title"><p>LOGO</p></li>
                                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="logo_bg" value="default" id="logo_bg_1" checked>
                    <label for="logo_bg_1"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_2" id="logo_bg_2">
                    <label for="logo_bg_2"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_3" id="logo_bg_3">
                    <label for="logo_bg_3"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_4" id="logo_bg_4">
                    <label for="logo_bg_4"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_5" id="logo_bg_5">
                    <label for="logo_bg_5"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_6" id="logo_bg_6">
                    <label for="logo_bg_6"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_7" id="logo_bg_7">
                    <label for="logo_bg_7"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_8" id="logo_bg_8">
                    <label for="logo_bg_8"></label>
                  </span>
                                </li>
                                <li class="drop-title"><p>头部</p></li>
                                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="header_bg" value="default" id="header_bg_1" checked>
                    <label for="header_bg_1"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_2" id="header_bg_2">
                    <label for="header_bg_2"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_3" id="header_bg_3">
                    <label for="header_bg_3"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_4" id="header_bg_4">
                    <label for="header_bg_4"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_5" id="header_bg_5">
                    <label for="header_bg_5"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_6" id="header_bg_6">
                    <label for="header_bg_6"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_7" id="header_bg_7">
                    <label for="header_bg_7"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_8" id="header_bg_8">
                    <label for="header_bg_8"></label>
                  </span>
                                </li>
                                <li class="drop-title"><p>侧边栏</p></li>
                                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="sidebar_bg" value="default" id="sidebar_bg_1" checked>
                    <label for="sidebar_bg_1"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_2" id="sidebar_bg_2">
                    <label for="sidebar_bg_2"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_3" id="sidebar_bg_3">
                    <label for="sidebar_bg_3"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_4" id="sidebar_bg_4">
                    <label for="sidebar_bg_4"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_5" id="sidebar_bg_5">
                    <label for="sidebar_bg_5"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_6" id="sidebar_bg_6">
                    <label for="sidebar_bg_6"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_7" id="sidebar_bg_7">
                    <label for="sidebar_bg_7"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_8" id="sidebar_bg_8">
                    <label for="sidebar_bg_8"></label>
                  </span>
                                </li>
                            </ul>
                        </li>
                        <!--切换主题配色-->
                    </ul>

                </div>
            </nav>

        </header>
        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-toolbar clearfix">
                                <form class="pull-right search-bar" method="get" action="javascript:void(0)" role="form">
                                    <div class="input-group">
                                        <div class="input-group-btn">
                                            <input type="hidden" name="search_field" id="search-field" value="title">
                                            <button class="btn btn-default dropdown-toggle" id="search-btn" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
                                                ${(bookResult.searchTitle)!'分类'} <span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li> <a tabindex="-1" href="javascript:void(0)" data-field="bookTitle">图书标题</a> </li>
                                                <li> <a tabindex="-1" href="javascript:void(0)" data-field="bookNum">图书编号</a> </li>
                                                <li> <a tabindex="-1" href="javascript:void(0)" data-field="author">图书作者</a> </li>
                                                <li> <a tabindex="-1" href="javascript:void(0)" data-field="stock">图书上架时间</a> </li>
                                            </ul>
                                        </div>
                                        <div class="input-group">
                                            <input type="text" class="form-control" value="" id="keyword" name="keyword" placeholder="${(bookResult.keyWord)!'请输入关键字'}" />
                                            <span class="input-group-btn">
                                            <button class="btn btn-default" type="button" id="queryBookByKey">搜索</button>
                                        </span>
                                        </div>
                                    </div>
                                </form>
                                <div class="toolbar-btn-action">
                                    <button type="button" class="btn btn-danger" data-target="#bookDeleteAnyModal"><i class="mdi mdi-delete-empty">批量删除</i></button>
                                    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#bookInsertModal"><i class="mdi mdi-plus">新增</i></button>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-condensed">
                                        <thead>
                                        <tr>
                                            <th class="col-xs-1">
                                                <label class="lyear-checkbox checkbox-primary">
                                                    <input type="checkbox" id="check-all"><span></span>
                                                </label>
                                            </th>
                                            <th class="col-xs-2">编号</th>
                                            <th class="col-xs-1">图片</th>
                                            <th class="col-xs-1">标题</th>
                                            <th class="col-xs-1">作者</th>
                                            <th class="col-xs-1">单价</th>
                                            <th class="col-xs-1">库存</th>
                                            <th class="col-xs-2">上架时间</th>
                                            <th class="col-xs-2">操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <#if bookList??>
                                            <#list bookList as book>
                                                <tr>
                                                    <td>
                                                        <label class="lyear-checkbox checkbox-primary">
                                                            <input type="checkbox" name="bookIds" value="${(book.bookId)!}">
                                                            <span></span>
                                                        </label>
                                                    </td>
                                                    <td style="display: none">${book.bookId}</td>
<#--                                                    <td>${book_index!?number + 1}</td>-->
                                                    <td>${book.bookNum!}</td>
                                                    <td><img src="${book.bookImage!}"></td>
                                                    <td>${book.bookTitle!}</td>
                                                    <td>${book.author!}</td>
                                                    <td>${book.unitPrice!}</td>
                                                    <td>${book.stock!}</td>
                                                    <td>${book.lastUpdateDate!?string('yyyy-MM-dd HH:mm:ss')}</td>
                                                    <td>
                                                        <div>
                                                            <button class="btn btn-info" data-toggle="modal" data-target="#bookUpdateModal"><i class="mdi mdi-pencil">编辑</i></button>
                                                            &nbsp;
                                                            <button class="btn btn-danger example-p-4" name="deleteBook"><i class="mdi mdi-delete">删除</i></button>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </#list>
                                        </#if>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- 分页条码 -->
                                <ul class="pagination">
                                    <#if bookPageInfo??>
                                        <!-- 页面大小 -->
                                        <#assign pageSize = (bookPageInfo.pageSize)!?number />
                                        <!-- 当前页 -->
                                        <#assign pageNow = (bookPageInfo.pageNum)!?number />
                                        <!-- 总页数 -->
                                        <#assign pageNum = (bookPageInfo.pages)!?number />
                                        <!-- 查询条件标题 -->
                                        <#assign searchTitle = (bookResult.searchTitle)!'分类' />
                                        <!-- 关键字 -->
                                        <#assign keyWord = (bookResult.keyWord)! />
                                        <#if pageSize??>
                                            <!-- 首页图标 -->
                                            <#if pageNow == 1>
                                                <!-- 如果当前页为 1  禁用-->
                                                <li class="disabled"><a href="#!"><span>«</span></a></li>
                                                <!-- 如果当前页 不为 1 可用 -->
                                            <#else>
                                                <li>
                                                    <a href="/toPage?url=/yiyibook/manager/book&pageNow=1&pageSize=5&searchTitle=${searchTitle}&keyWord=${keyWord}" pageNow="${pageNum}">
                                                        <span>«</span>
                                                    </a>
                                                </li>
                                            </#if>
                                            <!-- 页码图标 -->
                                            <#list 1..pageNum as record>
                                                <!-- 页码数 小于 5 -->
                                                <#if pageNum &lt;= 5>
                                                    <!-- 当前页 图标高亮 -->
                                                    <#if record == pageNow>
                                                        <li class="active"><a href="/toPage?url=/yiyibook/manager/book&pageNow=${record}&pageSize=5&searchTitle=${searchTitle}&keyWord=${keyWord}" pageNow="${record}"><span>${record}</span></a></li>
                                                        <!-- 非当前页 只显示页码 -->
                                                    <#else>
                                                        <li><a href="/toPage?url=/yiyibook/manager/book&pageNow=${record}&pageSize=5&searchTitle=${searchTitle}&keyWord=${keyWord}" pageNow="${record}"><span>${record}</span></a></li>
                                                    </#if>
                                                </#if>
                                                <!-- 页码数 大于 5 -->
                                                <#if pageNum &gt; 5>
                                                    <!-- 当 当前页小于 3 -->
                                                    <#if pageNow &lt;= 3>
                                                        <!-- 显示前五个页码 -->
                                                        <#if record &lt;= 5>
                                                            <#if record == pageNow>
                                                                <li class="active"><a href="/toPage?url=/yiyibook/manager/book&pageNow=${record}&pageSize=5&searchTitle=${searchTitle}&keyWord=${keyWord}" pageNow="${record}"><span>${record}</span></a></li>
                                                            <#else>
                                                                <li><a href="/toPage?url=/yiyibook/manager/book&pageNow=${record}&pageSize=5&searchTitle=${searchTitle}&keyWord=${keyWord}" pageNow="${record}"><span>${record}</span></a></li>
                                                            </#if>
                                                        </#if>
                                                        <!-- 当 当前页 大于 3 且 不是倒数第 5 个时 -->
                                                    <#elseif pageNow &gt; 3 && pageNow &lt; pageNum - 4>
                                                        <!-- 显示当前页 以及 前后 各两个页码 -->
                                                        <#if record &gt;= (pageNow - 2) && record &lt;= (pageNow + 2)>
                                                            <#if record == pageNow>
                                                                <li class="active"><a href="/toPage?url=/yiyibook/manager/book&pageNow=${record}&pageSize=5&searchTitle=${searchTitle}&keyWord=${keyWord}" pageNow="${record}"><span>${record}</span></a></li>
                                                            <#else>
                                                                <li><a href="/toPage?url=/yiyibook/manager/book&pageNow=${record}&pageSize=5&searchTitle=${searchTitle}&keyWord=${keyWord}" pageNow="${record}"><span>${record}</span></a></li>
                                                            </#if>
                                                        </#if>
                                                        <!-- 当 当前页 大于等于 倒数第 5 页时 -->
                                                    <#elseif pageNow &gt;= pageNum - 4>
                                                        <!-- 显示最后 5 页 -->
                                                        <#if record &gt;= pageNum - 4>
                                                            <#if record == pageNow>
                                                                <li class="active"><a href="/toPage?url=/yiyibook/manager/book&pageNow=${record}&pageSize=5&searchTitle=${searchTitle}&keyWord=${keyWord}" pageNow="${record}"><span>${record}</span></a></li>
                                                            <#else>
                                                                <li><a href="/toPage?url=/yiyibook/manager/book&pageNow=${record}&pageSize=5&searchTitle=${searchTitle}&keyWord=${keyWord}" pageNow="${record}"><span>${record}</span></a></li>
                                                            </#if>
                                                        </#if>
                                                    </#if>
                                                </#if>
                                            </#list>
                                            <!-- 尾页图标 -->
                                            <#if pageNow == pageNum>
                                                <!-- 如果当前页为 最后一页  禁用-->
                                                <li class="disabled"><a href="#!"><span>»</span></a></li>
                                                <!-- 如果当前页 不为 最后一页 可用 -->
                                            <#else>
                                                <li><a href="/toPage?url=/yiyibook/manager/book&pageNow=${pageNum}&pageSize=5&searchTitle=${searchTitle}&keyWord=${keyWord}" pageNow="${pageNum}"><span>»</span></a></li>
                                            </#if>
                                        </#if>
                                    </#if>
                                </ul>
                                <!-- 分页条码结尾 -->

                                <!-- 图书信息 新增模态框 -->
                                <div class="modal fade bs-example-modal-lg" id="bookInsertModal" tabindex="-1" role="dialog" aria-labelledby="bookInsertLabel">
                                    <div class="modal-dialog modal-lg" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                                <h4 class="modal-title" id="bookInsertLabel">新增</h4>
                                            </div>
                                            <div class="modal-body">
                                                <form class="form-horizontal" id="insertBookForm" enctype="multipart/form-data">
                                                    <div class="form-group">
                                                        <label for="bookNum" class="col-lg-3 control-label">编号</label>
                                                        <div class="input-group col-lg-8">
                                                            <input type="text" class="form-control input-lg" id="bookNumInsert" name="bookNum" aria-describedby="basic-addon1" readonly>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="bookTitle" class="col-lg-3 control-label">标题</label>
                                                        <div class="input-group col-lg-8">
                                                            <input type="text" class="form-control input-lg" id="bookTitleInsert" name="bookTitle" aria-describedby="basic-addon2">
                                                            <span class="input-group-addon" style="color: red;display: none" name="insertFlag" value="false" id="basic-addon2">×</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-8 col-lg-offset-3" style="display: none;color: red"></div>
                                                    <div class="form-group" name="bigStyleIdSelectInsert">
                                                        <input type="text" class="form-control input-lg" style="display: none" id="bigStyleIdInsert" name="bigStyleId">
                                                        <label for="bigStyleId" class="col-lg-3 control-label">大类名称</label>
                                                        <div class="dropdown col-lg-6" aria-describedby="basic-addon3">
                                                            <button class="btn btn-default" type="button" id="bigStyleNameInsert" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >
                                                                -- 请选择 -- <span class="caret"></span>
                                                            </button>
                                                            <ul class="dropdown-menu" aria-labelledby="bigStyleIdInsert">
                                                            </ul>
                                                        </div>
                                                        <span class="input-group-addon" style="color: red;display: none" name="insertFlag" value="false" id="basic-addon3">×</span>
                                                    </div>
                                                    <div class="col-lg-8 col-lg-offset-3" style="display: none;color: red"></div>
                                                    <div class="form-group" name="smallStyleIdSelectInsert">
                                                        <input type="text" class="form-control input-lg" style="display: none" id="smallStyleIdInsert" name="smallStyleId">
                                                        <label for="smallStyleId" class="col-lg-3 control-label">小类名称</label>
                                                        <div class="dropdown col-lg-6" aria-describedby="basic-addon4">
                                                            <button class="btn btn-default" id="smallStyleNameInsert" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >
                                                                -- 请选择 -- <span class="caret"></span>
                                                            </button>
                                                            <ul class="dropdown-menu" aria-labelledby="smallStyleIdInsert" >
                                                            </ul>
                                                        </div>
                                                        <span class="input-group-addon .col-md-offset-3" style="color: red;display: none" name="insertFlag" value="false" id="basic-addon4">×</span>
                                                    </div>
                                                    <div class="col-lg-8 col-lg-offset-3" style="display: none;color: red"></div>
                                                    <div class="form-group">
                                                        <label for="bookImageShowInsert" class="col-lg-3 control-label">图片预览</label>
                                                        <div class="input-group col-lg-8">
                                                            <img src="/images/kong.jpg" id="bookImageShowInsert" name="bookImageShow" width="125px">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="bookImage" class="col-lg-3 control-label">图片</label>
                                                        <div class="input-group col-lg-8">
                                                            <input type="file" class="form-control input-lg" id="bookImageInsert" name="bookImageUpload" aria-describedby="basic-addon5">
                                                            <span class="input-group-addon" style="color: red;display: none" name="insertFlag" value="false" id="basic-addon5">×</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-8 col-lg-offset-3" style="display: none;color: red"></div>
                                                    <div class="form-group">
                                                        <label for="Introduction" class="col-lg-3 control-label">简介</label>
                                                        <div class="input-group col-lg-8">
                                                            <input type="text" class="form-control input-lg" id="IntroductionInsert" name="Introduction" aria-describedby="basic-addon6">
                                                            <span class="input-group-addon" style="color: red;display: none" name="insertFlag" value="false" id="basic-addon6">×</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-8 col-lg-offset-3" style="display: none;color: red"></div>
                                                    <div class="form-group">
                                                        <label for="author" class="col-lg-3 control-label">作者</label>
                                                        <div class="input-group col-lg-8">
                                                            <input type="text" class="form-control input-lg" id="authorInsert" name="author" aria-describedby="basic-addon7">
                                                            <span class="input-group-addon" style="color: red;display: none" name="insertFlag" value="false" id="basic-addon7">×</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-8 col-lg-offset-3" style="display: none;color: red"></div>
                                                    <div class="form-group">
                                                        <label for="stock" class="col-lg-3 control-label">库存</label>
                                                        <div class="input-group col-lg-8">
                                                            <input type="number" class="form-control input-lg" id="stockInsert" name="stock" aria-describedby="basic-addon8">
                                                            <span class="input-group-addon" style="color: red;display: none" name="insertFlag" value="false" id="basic-addon8">×</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-8 col-lg-offset-3" style="display: none;color: red"></div>
                                                    <div class="form-group">
                                                        <label for="publishingCompany" class="col-lg-3 control-label">出版社</label>
                                                        <div class="input-group col-lg-8">
                                                            <input type="text" class="form-control input-lg" id="publishingCompanyInsert" name="publishingCompany" aria-describedby="basic-addon9">
                                                            <span class="input-group-addon" style="color: red;display: none" name="insertFlag" value="false" id="basic-addon9">×</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-8 col-lg-offset-3" style="display: none;color: red"></div>
                                                    <div class="form-group">
                                                        <label for="publishingDate" class="col-lg-3 control-label">出版日期</label>
                                                        <div class="input-group col-lg-8">
                                                            <input type="date" class="form-control input-lg" id="publishingDateInsert" name="publishingDate" aria-describedby="basic-addon10">
                                                            <span class="input-group-addon" style="color: red;display: none" name="insertFlag" value="false" id="basic-addon10">×</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-8 col-lg-offset-3" style="display: none;color: red"></div>
                                                    <div class="form-group">
                                                        <label for="unitPrice" class="col-lg-3 control-label">单价</label>
                                                        <div class="input-group col-lg-8">
                                                            <input type="number" class="form-control input-lg" id="unitPriceInsert" name="unitPrice" aria-describedby="basic-addon11">
                                                            <span class="input-group-addon" style="color: red;display: none" name="insertFlag" value="false" id="basic-addon11">×</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-8 col-lg-offset-3" style="display: none;color: red"></div>
                                                </form>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                                <button type="button" id="insertBookSaveBtn" class="btn btn-primary">保存</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 图书信息 新增模态框结束 -->

                                <!-- 图书信息 编辑模态框 -->
                                <div class="modal fade bs-example-modal-lg" id="bookUpdateModal" tabindex="-1" role="dialog" aria-labelledby="bookUpdateLabel">
                                    <div class="modal-dialog modal-lg" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                                <h4 class="modal-title" id="bookUpdateLabel">编辑</h4>
                                            </div>
                                            <div class="modal-body">
                                                <form class="form-horizontal" id="updateBookForm" enctype="multipart/form-data">
                                                    <div class="form-group" style="display: none">
                                                        <label for="bookId" class="col-lg-3 control-label">id</label>
                                                        <div class="input-group col-lg-8">
                                                            <input type="text" class="form-control input-lg" id="bookIdUpdate" name="bookId" readonly>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="bookNum" class="col-lg-3 control-label">编号</label>
                                                        <div class="input-group col-lg-8">
                                                            <input type="text" class="form-control input-lg" id="bookNumUpdate" name="bookNum" readonly>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="bookTitle" class="col-lg-3 control-label">标题</label>
                                                        <div class="input-group col-lg-8">
                                                            <input type="text" class="form-control input-lg" id="bookTitleUpdate" name="bookTitle" aria-describedby="basic-addon12">
                                                            <span class="input-group-addon" style="color: red;display: none" name="updateFlag" value="false" id="basic-addon12">×</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-8 col-lg-offset-3" style="display: none;color: red"></div>
                                                    <div class="form-group" name="bigStyleIdSelectUpdate">
                                                        <input type="text" class="form-control input-lg" style="display: none" id="bigStyleIdUpdate" name="bigStyleId">
                                                        <label for="bigStyleId" class="col-lg-3 control-label">大类名称</label>
                                                        <div class="dropdown col-lg-6" aria-describedby="basic-addon13">
                                                            <button class="btn btn-default" type="button" id="bigStyleNameUpdate" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >
                                                                -- 请选择 -- <span class="caret"></span>
                                                            </button>
                                                            <ul class="dropdown-menu" aria-labelledby="bigStyleIdUpdate">
                                                            </ul>
                                                        </div>
                                                        <span class="input-group-addon" style="color: red;display: none" name="updateFlag" value="false" id="basic-addon13">×</span>
                                                    </div>
                                                    <div class="col-lg-8 col-lg-offset-3" style="display: none;color: red"></div>
                                                    <div class="form-group" name="smallStyleIdSelectUpdate">
                                                        <input type="text" class="form-control input-lg" style="display: none" id="smallStyleIdUpdate" name="smallStyleId">
                                                        <label for="smallStyleId" class="col-lg-3 control-label">小类名称</label>
                                                        <div class="dropdown col-lg-6" aria-describedby="basic-addon14">
                                                            <button class="btn btn-default" id="smallStyleNameUpdate" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >
                                                                -- 请选择 -- <span class="caret"></span>
                                                            </button>
                                                            <ul class="dropdown-menu" aria-labelledby="smallStyleIdUpdate" >
                                                            </ul>
                                                        </div>
                                                        <span class="input-group-addon .col-md-offset-3" style="color: red;display: none" name="updateFlag" value="false" id="basic-addon14">×</span>
                                                    </div>
                                                    <div class="col-lg-8 col-lg-offset-3" style="display: none;color: red"></div>
                                                    <div class="form-group">
                                                        <label for="bookImageShowUpdate" class="col-lg-3 control-label">图片预览</label>
                                                        <div class="input-group col-lg-8">
                                                            <img src="" id="bookImageShowUpdate" name="bookImageShow" width="125px">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="bookImage" class="col-lg-3 control-label">图片</label>
                                                        <div class="input-group col-lg-8">
                                                            <input type="file" class="form-control input-lg" id="bookImageUpdate" name="bookImageUpload" aria-describedby="basic-addon15">
                                                            <span class="input-group-addon" style="color: red;display: none" name="updateFlag" value="false" id="basic-addon15">×</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-8 col-lg-offset-3" style="display: none;color: red"></div>
                                                    <div class="form-group">
                                                        <label for="Introduction" class="col-lg-3 control-label">简介</label>
                                                        <div class="input-group col-lg-8">
                                                            <input type="text" class="form-control input-lg" id="IntroductionUpdate" name="Introduction" aria-describedby="basic-addon16">
                                                            <span class="input-group-addon" style="color: red;display: none" name="updateFlag" value="false" id="basic-addon16">×</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-8 col-lg-offset-3" style="display: none;color: red"></div>
                                                    <div class="form-group">
                                                        <label for="author" class="col-lg-3 control-label">作者</label>
                                                        <div class="input-group col-lg-8">
                                                            <input type="text" class="form-control input-lg" id="authorUpdate" name="author" aria-describedby="basic-addon17">
                                                            <span class="input-group-addon" style="color: red;display: none" name="updateFlag" value="false" id="basic-addon17">×</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-8 col-lg-offset-3" style="display: none;color: red"></div>
                                                    <div class="form-group">
                                                        <label for="stock" class="col-lg-3 control-label">库存</label>
                                                        <div class="input-group col-lg-8">
                                                            <input type="number" class="form-control input-lg" id="stockUpdate" name="stock" aria-describedby="basic-addon18">
                                                            <span class="input-group-addon" style="color: red;display: none" name="updateFlag" value="false" id="basic-addon18">×</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-8 col-lg-offset-3" style="display: none;color: red"></div>
                                                    <div class="form-group">
                                                        <label for="" class="col-lg-3 control-label">出版社</label>
                                                        <div class="input-group col-lg-8">
                                                            <input type="text" class="form-control input-lg" id="publishingCompanyUpdate" name="publishingCompany" aria-describedby="basic-addon19">
                                                            <span class="input-group-addon" style="color: red;display: none" name="updateFlag" value="false" id="basic-addon19">×</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-8 col-lg-offset-3" style="display: none;color: red"></div>
                                                    <div class="form-group">
                                                        <label for="publishingDate" class="col-lg-3 control-label">出版日期</label>
                                                        <div class="input-group col-lg-8">
                                                            <input type="date" class="form-control input-lg" id="publishingDateUpdate" name="publishingDate" aria-describedby="basic-addon20">
                                                            <span class="input-group-addon" style="color: red;display: none" name="updateFlag" value="false" id="basic-addon20">×</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-8 col-lg-offset-3" style="display: none;color: red"></div>
                                                    <div class="form-group">
                                                        <label for="unitPrice" class="col-lg-3 control-label">单价</label>
                                                        <div class="input-group col-lg-8">
                                                            <input type="number" class="form-control input-lg" id="unitPriceUpdate" name="unitPrice" aria-describedby="basic-addon21">
                                                            <span class="input-group-addon" style="color: red;display: none" name="updateFlag" value="false" id="basic-addon21">×</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-8 col-lg-offset-3" style="display: none;color: red"></div>
                                                </form>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default" data-dismiss="modal" >关闭</button>
                                                <button type="button" class="btn btn-primary" id="updateBookSaveBtn">保存</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 图书信息 编辑模态框结束 -->

                                <!-- 图书信息 批量删除模态框 -->
                                <div class="modal fade" id="bookDeleteAnyModal" tabindex="-1" role="dialog" aria-labelledby="bookDeleteLabel">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                                <h4 class="modal-title" id="bookDeleteLabel">批量删除</h4>
                                            </div>
                                            <div class="modal-body">
                                                <span style="display: none" id="deleteBookIds"></span>
                                                确认要删除以下 [<span id="deleteBookMsg" style="color:red;"></span>] 这些标题的图书嘛？
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                                <button type="button" class="btn btn-danger" id="deleteAnyBookSubmit">删除</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 图书信息 删除模态框结束 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/js/perfect-scrollbar.min.js"></script>

<!--消息提示-->
<script src="/static/js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="/static/js/lightyear.js"></script>
<!--对话框-->
<script src="/static/js/jconfirm/jquery-confirm.min.js"></script>
<script type="text/javascript" src="/static/js/main.min.js"></script>

<script type="text/javascript">
    $(function(){
        // 添加图书 验证图书信息
        // 1、图书标题 可以是 数字，字母，下划线组成 长度 [4,16]
        var regTitle = /^[\w\u4E00-\u9FA5]{1,20}$/;
        var objTitle = $('#bookTitleInsert');
        var msgTitle = "图书标题必须由1-20个非特殊字符组成（除下划线外）！";
        checkEvent(regTitle, objTitle, msgTitle);

        // 2、图书大类名称 不能为 '-- 请选择 --' 即未选择状态
        var regBigStyleName = "-- 请选择 --";
        var objBigStyleName = $('#bigStyleNameInsert');
        var msgBigStyleName = "请选择一种图书大类！";
        checkStyleEvent(regBigStyleName, objBigStyleName, msgBigStyleName);

        // 3、图书小类名称 不能为 '-- 请选择 --' 即未选择状态
        var regSmallStyleName = "-- 请选择 --";
        var objSmallStyleName = $('#smallStyleNameInsert');
        var msgSmallStyleName = "请选择一种图书小类！";
        checkStyleEvent(regSmallStyleName, objSmallStyleName, msgSmallStyleName);

        // 4、图书图片 不能为空，必须是 .jpg .png .gif .jpeg 结尾 ，大小不超过 1M
        var objImage = $('#bookImageInsert');
        checkImageEvent(objImage);
        // 图片改变事件
        bookImageChange(objImage);
        // 校验图片事件
        function checkImageEvent(obj){
            obj.focus(function () {
                $(this).parent().parent().next().hide();
            }).blur(function () {
                var checkFlag = false;
                // 保存错误信息
                var errorMsg = "";
                // 获取 文件 判断是否为空
                var fileInput = $(this).get(0).files[0];
                if(!fileInput){
                    var id = obj.attr("id");
                    if(id == "bookImageUpdate"){
                        checkFlag = true;
                        $(this).next().show();
                        $(this).next().attr('value','true');
                        $(this).next().html('√');
                        $(this).next().css('color','green');
                    }else if(id == "bookImageInsert"){
                        errorMsg = "请选择一个图片！";
                    }
                }else{
                    // 获取 文件路径
                    var imagePath = $(this).val();
                    // 获取 文件后缀
                    var imageSuffix = imagePath.substr(imagePath.lastIndexOf(".")).toLocaleLowerCase();
                    if(imageSuffix != ".jpg" && imageSuffix != ".png" && imageSuffix != ".gif" && imageSuffix != ".jpeg"){
                        errorMsg = "请选择一个格式为 '.jpg','.png','.gif'或者'.jpeg'结尾的图片！";
                    }else{
                        var imageSize = fileInput.size;
                        if(imageSize > 1024*1024*1){
                            errorMsg = "文件大小不能超过1M！";
                        }else{
                            checkFlag = true;
                            $(this).next().show();
                            $(this).next().attr('value','true');
                            $(this).next().html('√');
                            $(this).next().css('color','green');
                        }
                    }
                }
                if(!checkFlag){
                    // 显示错误提示
                    $(this).parent().parent().next().show();
                    $(this).parent().parent().next().html(errorMsg);
                    // 显示错误标识
                    $(this).next().show();
                    $(this).next().html('×');
                    $(this).next().css('color','red');
                    $(this).next().attr('value','false');
                }
            });
        }

        // 5、图书简介 4-20个任意字符
        var regIntroduction = /^(?=.*[\w\u4E00-\u9FA5])[\S]{4,20}$/;
        var objIntroduction = $('#IntroductionInsert');
        var msgIntroduction = "图书简介必须由最少1个非特殊字符组成，长度4-20";
        checkEvent(regIntroduction, objIntroduction, msgIntroduction);

        // 6、图书作者
        var regAuthor = /^[\[\]\(\)A-Za-z\u4E00-\u9FA5·]{1,30}$/;
        var objAuthor = $('#authorInsert');
        var msgAuthor = "作者名称只能由中英文，英文下中小括号加中位点组成，且长度1-30！";
        checkEvent(regAuthor, objAuthor, msgAuthor);

        // 7、图书库存 只能是大于0的整数
        var regStock = /^[1-9]\d*$/;
        var objStock = $('#stockInsert');
        var msgStock = "库存必须是大于0的正整数！";
        checkEvent(regStock, objStock, msgStock);

        // 8、图书出版社 必须由 4-20个汉字组成
        var regPublishingCompany = /^[\u4E00-\u9FA5]{4,20}$/;
        var objPublishingCompany = $('#publishingCompanyInsert');
        var msgPublishingCompany = "出版社必须由4-20个汉字组成！";
        checkEvent(regPublishingCompany, objPublishingCompany, msgPublishingCompany);

        // 9、出版日期 日期不能为空
        var regPublishingDate = /^[\S]{1,}$/;
        var objPublishingDate = $('#publishingDateInsert');
        var msgPublishingDate = "请完整填写日期！";
        checkEvent(regPublishingDate, objPublishingDate, msgPublishingDate);

        // 10、单价 单价必须大于0
        var regUnitPrice = /^[1-9]\d*$/;
        var objUnitPrice = $('#unitPriceInsert');
        var msgUnitPrice = "单价必须是正整数！";
        checkEvent(regUnitPrice, objUnitPrice, msgUnitPrice);

        $('.search-bar .dropdown-menu a').click(function() {
            var field = $(this).data('field') || '';
            $('#search-field').val(field);
            $('#search-btn').html($(this).text() + ' <span class="caret"></span>');
        });

        // 新增图书 图书大类名称 下拉列表
        bigStyleSelect("Insert");
        // 图书大类名称 下拉列表 点击事件
        function bigStyleSelect(way){
            $("div[name=" + 'bigStyleIdSelect' + way +"]").click(function () {
                // 清空 图书小类的选择
                $("div[name=" + 'smallStyleIdSelect' + way +"]").children("input").eq(0).val("");
                $('#smallStyleName'+way).html('-- 请选择 -- <span class="caret"></span>');
                $('#smallStyleName'+way).blur();

                // 查询所有图书大类
                $.ajax({
                    type: "POST",
                    url: "/big/selectAll",
                    dataType: "JSON",
                    success: function(data){
                        if(data != null){
                            $("ul[aria-labelledby=" + 'bigStyleId' + way + "]").html("");
                            var bookBigStyleList = data.extend.bookBigStyleList;
                            $(bookBigStyleList).each(function (index, bookBigStyle) {
                                var liDom = $('<li></li>').append($('<a></a>').attr({"href":"#","value":bookBigStyle.bigStyleId,"onclick":"styleNameSelect(this,$("+"'#bigStyleName"+ way + "'))"})
                                    .html(bookBigStyle.bigStyleName));
                                if(index == 0){
                                    $(this).children("input").eq(0).val(bookBigStyle.bigStyleId);
                                    $(this).children("button").eq(0).html(bookBigStyle.bigStyleName + ' <span class="caret"></span>');
                                }
                                $("ul[aria-labelledby=" + 'bigStyleId' + way + "]").append(liDom);
                            });
                        }
                    },
                    error: function(data){
                        console.log(data);
                    }
                });
            });
        }

        // 新增图书 图书小类名称 下拉列表
        smallStyleSelect("Insert");
        // 图书小类名称 下拉列表 点击事件
        function smallStyleSelect(way){
            $("div[name=" + 'smallStyleIdSelect' + way +"]").click(function () {
                var bigStyleId = $('#bigStyleId'+way).val();
                $.ajax({
                    type: "GET",
                    url: "/small/selectAllByBigStyleId",
                    data: {"bigStyleId": bigStyleId},
                    dataType: "JSON",
                    success: function(data){
                        if(data != null){
                            $("ul[aria-labelledby=" + 'smallStyleId' + way + "]").html("");
                            var bookSmallStyleList = data.extend.smallStyleList;
                            $(bookSmallStyleList).each(function (index, bookSmallStyle) {
                                var liDom = $('<li></li>').append($('<a></a>').attr({"href":"#","value":bookSmallStyle.smallStyleId,"onclick":"styleNameSelect(this, $("+"'#smallStyleName"+ way + "'))"})
                                    .html(bookSmallStyle.smallStyleName));
                                if(index == 0){
                                    $(this).children("input").eq(0).val(bookSmallStyle.smallStyleId);
                                    $(this).children("button").eq(0).html(bookSmallStyle.smallStyleName + ' <span class="caret"></span>');
                                }
                                $("ul[aria-labelledby=" + 'smallStyleId' + way + "]").append(liDom);
                            });
                        }
                    },
                    error: function(data){
                        console.log(data);
                    }
                });
            });
        }

        // 查询框 - 按钮 点击事件
        $('#queryBookByKey').click(function (){
            // 查询关键字
            var keyWord = $('#keyword').val();
            // 关键字标题按钮内容
            var searchTitleBtn = $('#search-btn').html();
            // 获取必须的内容 并 去空格
            var searchTitle = searchTitleBtn.substr(0,searchTitleBtn.indexOf('<')).trim();
            // 条件查询 请求后台
            window.location.replace("/toPage?url=/yiyibook/manager/book&searchTitle="
                + searchTitle + "&keyWord=" + keyWord);
        });

        // 添加按钮点击事件 自动生成 图书编号 并 显示
        $('button[data-target="#bookInsertModal"]').click(function(){
            $.ajax({
                type: "GET",
                url: "/book/lastNum",
                dataType: "TEXT",
                success: function(data){
                    $('#bookNumInsert').val(data);
                },
                error: function(data){
                    console.log(data);
                }
            });
        });

        // 添加图书 按钮保存 点击事件
        $('#insertBookSaveBtn').click(function () {
            var flagArray = $("span[name='insertFlag']");
            for (var i = 0; i < flagArray.length; i++) {
                var checkSpan = flagArray[i];
                // 获取 验证标识 的值
                var checkVal = $(checkSpan).attr('value');
                console.log(checkVal);
                if(checkVal == "false"){
                    console.log("校验失败！");
                    $(checkSpan).parent().children().eq(0).blur();
                    break;
                }
            }
            if(i == flagArray.length){
                console.log("校验成功！");
                var form = new FormData($('#insertBookForm')[0]);
                lightyear.loading('show');
                $.ajax({
                    type: "POST",
                    url: "/book/insert",
                    data: form,
                    dataType: "JSON",
                    cache: false,
                    async: false,
                    processData : false,  //必须false才会避开jQuery对 formdata 的默认处理
                    contentType : false,  //必须false才会自动加上正确的Content-Type
                    success: function(data){
                        lightyear.loading('hide');
                        // 请求编码 100 为成功 200 为失败
                        var code = data.code;
                        if(code == 100){
                            lightyear.notify('添加成功，页面即将自动刷新', 'success', 1000);
                            setTimeout(function() {
                                window.location.reload();
                            }, 1e3)
                        }else if(code == 200){
                            lightyear.notify('添加失败' + data.extend.errorMsg, 'danger', 1000);
                        }
                    },
                    error: function(data){
                        lightyear.loading('hide');
                        lightyear.notify('添加失败，请重试或联系技术人员', 'danger', 1000);
                        console.log(data);
                    }
                });
            }
        });

        // 编辑按钮点击事件
        $('button[data-target="#bookUpdateModal"]').click(function () {
            var bookId = $(this).parent().parent().parent().children('td').eq(1).html();
            console.log(bookId);
            $.ajax({
                type: "GET",
                url: "/book/selectOne",
                data: { "bookId" : bookId },
                dataType: "JSON",
                success: function(data){
                    console.log(data);
                    if(data != null){
                        $('#bookIdUpdate').val(data.bookId);
                        $('#bookNumUpdate').val(data.bookNum);
                        $('#bookTitleUpdate').val(data.bookTitle);
                        // 大类名称 下拉列表
                        $('#bigStyleIdUpdate').val(data.bigStyleId);
                        $('#bigStyleNameUpdate').html(data.bigStyleName + ' <span class="caret"></span>');
                        // 小类名称 下拉列表
                        $('#smallStyleIdUpdate').val(data.smallStyleId);
                        $('#smallStyleNameUpdate').html(data.smallStyleName + ' <span class="caret"></span>');
                        // 图片预览
                        $('#bookImageShowUpdate').attr("src",data.bookImage);
                        $('#IntroductionUpdate').val(data.introduction);
                        $('#authorUpdate').val(data.author);
                        $('#stockUpdate').val(data.stock);
                        $('#publishingCompanyUpdate').val(data.publishingCompany);
                        $('#publishingDateUpdate').val(data.publishingDate);
                        $('#unitPriceUpdate').val(data.unitPrice);

                        var flagArray = $("span[name='updateFlag']");
                        for (var i = 0; i < flagArray.length; i++) {
                            var checkSpan = flagArray[i];
                            // 获取 验证标识 的值
                            $(checkSpan).attr('value','true');
                            $(checkSpan).show();
                            $(checkSpan).html('√');
                            $(checkSpan).css('color','green');
                        }
                    }
                },
                error: function(data){
                    console.log(data);
                }
            });
        });

        // 编辑图书 图书大类名称 下拉列表
        bigStyleSelect("Update");

        // 编辑图书 图书小类 下拉列表
        smallStyleSelect("Update");

        // 编辑图书 验证图书信息
        // 1、图书标题 可以是 数字，字母，下划线组成 长度 [4,16]
        var objTitleUpdate = $('#bookTitleUpdate');
        checkEvent(regTitle, objTitleUpdate, msgTitle);

        // 2、图书大类名称 不能为 '-- 请选择 --' 即未选择状态
        var objBigStyleNameUpdate = $('#bigStyleNameUpdate');
        checkStyleEvent(regBigStyleName, objBigStyleNameUpdate, msgBigStyleName);

        // 3、图书小类名称 不能为 '-- 请选择 --' 即未选择状态
        var objSmallStyleNameUpdate = $('#smallStyleNameUpdate');
        checkStyleEvent(regSmallStyleName, objSmallStyleNameUpdate, msgSmallStyleName);

        // 4、图书图片 不能为空，必须是 .jpg .png .gif .jpeg 结尾 ，大小不超过 1M
        var objImageUpdate = $('#bookImageUpdate');
        checkImageEvent(objImageUpdate);
        // 图片改变事件
        bookImageChange(objImageUpdate);

        // 5、图书简介 4-20个任意字符
        var objIntroductionUpdate = $('#IntroductionUpdate');
        checkEvent(regIntroduction, objIntroductionUpdate, msgIntroduction);

        // 6、图书作者
        var objAuthorUpdate = $('#authorUpdate');
        checkEvent(regAuthor, objAuthorUpdate, msgAuthor);

        // 7、图书库存 只能是大于等于0的整数
        var regStockUpdate = /^\d{1,}$/;
        var objStockUpdate = $('#stockUpdate');
        checkEvent(regStockUpdate, objStockUpdate, msgStock);

        // 8、图书出版社 必须由 4-20个汉字组成
        var objPublishingCompanyUpdate = $('#publishingCompanyUpdate');
        checkEvent(regPublishingCompany, objPublishingCompanyUpdate, msgPublishingCompany);

        // 9、出版日期 日期不能为空
        var objPublishingDateUpdate = $('#publishingDateUpdate');
        checkEvent(regPublishingDate, objPublishingDateUpdate, msgPublishingDate);

        // 10、单价 单价必须大于0
        var objUnitPriceUpdate = $('#unitPriceUpdate');
        checkEvent(regUnitPrice, objUnitPriceUpdate, msgUnitPrice);

        // 编辑图书 按钮保存 点击事件
        $('#updateBookSaveBtn').click(function () {
            var flagArray = $("span[name='updateFlag']");
            for (var i = 0; i < flagArray.length; i++) {
                var checkSpan = flagArray[i];
                // 获取 验证标识 的值
                var checkVal = $(checkSpan).attr('value');
                console.log(checkVal);
                if(checkVal == "false"){
                    console.log("校验失败！");
                    $(checkSpan).parent().children().eq(0).blur();
                    break;
                }
            }
            if(i == flagArray.length){
                console.log("校验成功！");
                var form = new FormData($('#updateBookForm')[0]);
                lightyear.loading('show');
                $.ajax({
                    type: "POST",
                    url: "/book/update",
                    data: form,
                    dataType: "JSON",
                    cache: false,
                    async: false,
                    processData : false,  //必须false才会避开jQuery对 formdata 的默认处理
                    contentType : false,  //必须false才会自动加上正确的Content-Type
                    success: function(data){
                        lightyear.loading('hide');
                        // 请求编码 100 为成功 200 为失败
                        var code = data.code;
                        if(code == 100){
                            lightyear.notify('修改成功，页面即将自动刷新', 'success', 1000);
                            setTimeout(function() {
                                window.location.reload();
                            }, 1e3)
                        }else if(code == 200){
                            lightyear.notify('修改失败' + data.extend.errorMsg, 'danger', 1000);
                        }
                    },
                    error: function(data){
                        lightyear.loading('hide');
                        lightyear.notify('修改失败，请重试或联系技术人员', 'danger', 1000);
                        console.log(data);
                    }
                });
            }
        });

        // 删除按钮点击事件
        $('button[name="deleteBook"]').click(function () {
            var bookId = $(this).parent().parent().parent().children('td').eq(1).html();
            var bookTitle = $(this).parent().parent().parent().children('td').eq(4).html();
            $.confirm({
                title: '删除提示',
                content: '确认删除 标题为 <span style="color: red;">"' + bookTitle + '"</span>的图书？',
                type: 'red',
                typeAnimated: true,
                buttons: {
                    tryAgain: {
                        text: '确认',
                        btnClass: 'btn-red',
                        action: function(){
                            lightyear.loading('show');
                            $.ajax({
                                type: "GET",
                                url: "/book/delete",
                                data: { "bookId" : bookId },
                                dataType: "JSON",
                                success: function(data){
                                    lightyear.loading('hide');
                                    // 请求编码 100 为成功 200 为失败
                                    var code = data.code;
                                    if(code == 100){
                                        lightyear.notify('删除成功，页面即将自动刷新', 'success', 1000);
                                        setTimeout(function() {
                                            window.location.reload();
                                        }, 1e3)
                                    }else if(code == 200){
                                        lightyear.notify('删除失败' + data.extend.errorMsg, 'danger', 1000);
                                    }
                                },
                                error: function(data){
                                    lightyear.loading('hide');
                                    lightyear.notify('删除失败，请重试或联系技术人员', 'danger', 1000);
                                    console.log(data);
                                }
                            });
                        }
                    },
                    close: {
                        text: '取消'
                    }
                }
            });
        });

        // 批量删除按钮点击事件
        $('button[data-target="#bookDeleteAnyModal"]').click(function () {
            // 要被删除的 图书id 数组
            var idsArr = new Array();
            // 要被删除的 图书账号 数组
            var nameArr = new Array();
            var j = 0;
            var checkBoxArr = $('input[name="bookIds"]');
            for (var i = 0; i < checkBoxArr.length; i++) {
                var checked = $(checkBoxArr[i]).attr("checked");
                var bookId = $(checkBoxArr[i]).attr("value");
                var bookTitle = $(checkBoxArr[i]).parent().parent().parent().children('td').eq(4).html();
                if(checked == "checked"){
                    idsArr[j] = bookId;
                    nameArr[j] = bookTitle;
                    j++;
                }
            }

            if(idsArr.length == 0){
                console.log(idsArr.length);
                $('#bookDeleteAnyModal').modal('hide');
                $.alert({
                    title: '提示',
                    content: '请先勾选您要删除的图书！',
                    type: 'red',
                    buttons: {
                        confirm: {
                            text: '确认',
                            btnClass: 'btn-primary',
                        }
                    }
                });
            }else if(idsArr.length > 0){
                console.log(idsArr.length);
                $('#bookDeleteAnyModal').modal('show');
                var bookTitles = "";
                var bookIds = "";
                for (var i = 0; i < nameArr.length; i++) {
                    if(i == nameArr.length - 1){
                        bookTitles = bookTitles + nameArr[i];
                        bookIds = bookIds + idsArr[i];
                    }else{
                        bookTitles = bookTitles + nameArr[i] + ", ";
                        bookIds = bookIds + idsArr[i] + ", ";
                    }
                }
                $('#deleteBookMsg').html(bookTitles);
                $('#deleteBookIds').html(bookIds);
            }
        });

        // 批量删除按钮 确认 点击事件
        $('#deleteAnyBookSubmit').click(function () {
            var bookIds = $('#deleteBookIds').html();
            lightyear.loading('show');
            $.ajax({
                type: "GET",
                url: "/book/deleteAny",
                data: { "bookIds" : bookIds },
                dataType: "JSON",
                success: function(data){
                    lightyear.loading('hide');
                    // 请求编码 100 为成功 200 为失败
                    var code = data.code;
                    if(code == 100){
                        lightyear.notify('批量删除成功，页面即将自动刷新', 'success', 1000);
                        setTimeout(function() {
                            window.location.reload();
                        }, 1e3)
                    }else if(code == 200){
                        lightyear.notify('批量删除失败' + data.extend.errorMsg, 'danger', 1000);
                    }
                },
                error: function(data){
                    lightyear.loading('hide');
                    lightyear.notify('批量删除失败，请重试或联系技术人员', 'danger', 1000);
                    console.log(data);
                }
            });

        })

        // 复选框点击事件
        $('input[name="bookIds"]').click(function () {
            var checkedFlag = $(this).attr("checked");
            if(checkedFlag == "checked"){
                $(this).attr("checked", false);
            }else{
                $(this).attr("checked", true);
            }
        });

        // 复选框全选事件
        $('#check-all').click(function () {
            var checkedFlag = $(this).attr("checked");
            if(checkedFlag == "checked"){
                $(this).attr("checked", false);
                $('input[name="bookIds"]').attr("checked", false);
            }else{
                $(this).attr("checked", true);
                $('input[name="bookIds"]').attr("checked", true);
            }
        });

        /**
         * 校验事件函数 (不含确认密码)
         * @param reg 正则表达式
         * @param obj 校验的 input 元素
         * @param msg 提示信息
         */
        function checkEvent(reg, obj, msg){
            obj.focus(function () {
                $(this).parent().parent().next().hide();
            }).blur(function () {
                if(!reg.test(obj.val())){
                    // 显示错误提示
                    obj.parent().parent().next().show();
                    obj.parent().parent().next().html(msg);
                    // 显示错误标识
                    obj.next().show();
                    obj.next().html('×');
                    obj.next().css('color','red');
                    obj.next().attr('value','false');
                }else{
                    obj.next().show();
                    obj.next().attr('value','true');
                    obj.next().html('√');
                    obj.next().css('color','green');
                }
            });
        }

        /**
         * 校验 图书类型 事件函数
         * @param reg 正则表达式
         * @param obj 校验的 input 元素
         * @param msg 提示信息
         */
        function checkStyleEvent(reg, obj, msg){
            obj.focus(function () {
                $(this).parent().parent().next().hide();
            }).blur(function () {
                console.log("失去焦点");
                // 图书类型 下拉列表 按钮内容
                var buttonHtml = obj.html();
                // 截取 图书类型名称
                var styleName = buttonHtml.substr(0, buttonHtml.indexOf("<")).trim();
                console.log(styleName);
                if(reg == styleName){
                    // 显示错误提示
                    obj.parent().parent().next().show();
                    obj.parent().parent().next().html(msg);
                    // 显示错误标识
                    obj.parent().next().show();
                    obj.parent().next().html('×');
                    obj.parent().next().css('color','red');
                    obj.parent().next().attr('value','false');
                }else{
                    obj.parent().next().show();
                    obj.parent().next().attr('value','true');
                    obj.parent().next().html('√');
                    obj.parent().next().css('color','green');
                    obj.parent().parent().next().hide();
                }
            });
        }

        function bookImageChange(obj){
            obj.change(function(){
                //获取input file的files文件数组;
                //$('#filed')获取的是jQuery对象，.get(0)转为原生对象;
                //这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];
                var file = obj.get(0).files[0];
                //创建用来读取此文件的对象
                var reader = new FileReader();
                //使用该对象读取file文件
                reader.readAsDataURL(file);
                //读取文件成功后执行的方法函数
                reader.onload=function(e){
                    //读取成功后返回的一个参数e，整个的一个进度事件
                    console.log(e);
                    //选择所要显示图片的img，要赋值给img的src就是e中target下result里面
                    //的base64编码格式的地址
                    var objId = obj.attr("id");
                    if(objId == "bookImageInsert"){
                        $('#bookImageShowInsert').get(0).src = e.target.result;
                    }else if(objId == "bookImageUpdate"){
                        $('#bookImageShowUpdate').get(0).src = e.target.result;
                    }
                }
            });
        }
    });

    // 图书类型名称 下拉列表 函数
    function styleNameSelect(obj, dom){
        var valMsg = $(obj).html();
        var val = $(obj).attr('value');
        $(obj).parent().parent().parent().prev().prev().val(val);
        $(obj).parent().parent().prev().html(valMsg + ' <span class="caret"></span>');
        dom.blur();
    }
</script>
</body>
</html>